<template>
  <a-form-model-item
    :prop="prop"
    :rules="rules"
    :autoLink="autoLink"
    :colon="colon"
    :extra="extra"
    :hasFeedback="hasFeedback"
    :help="help"
    :htmlFor="htmlFor"
    :label="label"
    :labelCol="labelCol"
    :labelAlign="labelAlign"
    :required="required"
    :validateStatus="validateStatus"
    :wrapperCol="wrapperCol"
  >
    <slot />
    <slot slot="label" name="label" />
    <slot slot="help" name="help" />
  </a-form-model-item>
</template>

<script>
export default {
  name: 'DFormItem',
  props: {
    prop: {
      type: String
    },
    rules: {
      type: [Object, Array]
    },
    autoLink: {
      type: Boolean,
      default: true
    },
    colon: {
      type: Boolean,
      default: true
    },
    extra: {
      type: String
    },
    hasFeedback: {
      type: Boolean,
      default: false
    },
    help: {
      type: String
    },
    htmlFor: {
      type: String
    },
    label: {
      type: String
    },
    labelCol: {
      type: Object
    },
    labelAlign: {
      type: String,
      default: 'right'
    },
    required: {
      type: Boolean,
      default: false
    },
    validateStatus: {
      type: String
    },
    wrapperCol: {
      type: Object
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .tw-form-item-label {
  line-height: 0 !important;
}
::v-deep .tw-form-item label {
  font-size: 12px;
}
::v-deep .has-error .tw-input,
::v-deep .has-error .tw-input:hover {
  border-color: #f2242e;
}
::v-deep .has-error .tw-form-explain,
::v-deep .has-error .tw-form-split {
  font-size: 11px;
  color: #f2242e;
}
::v-deep .tw-form-item-with-help {
  margin-bottom: 5px;
}
</style>
